<template>
	<view class="new">
		<!-- 头部吸顶 -->
		<Ceiling :navHeight='navHeight' :navTitle='navTitle'></Ceiling>
		<!-- 伪盒子 称高 -->
		<view class="box"></view>
		<!-- 导航栏 -->
		<view class="nav">
			<navItem v-for="(item,index) in navArr" :key="index" :navItem='item' :size = 'navSize'></navItem>
		</view>
		<!-- workList -->
		<view class="work">
			<workList v-for="(item,index) in workArr" :key="index" :size = 'workSize' :workItem='item'></workList>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 吸顶标题
				navTitle:'消息',
				//导航栏的高
				navHeight:0,
				//nav图片尺寸以及每个List尺寸
				navSize:{
					imgWidth:40,
					imgHeight:40,
					picWidth:88,
					picHeight:88,
				},
				//work图片尺寸以及每个List尺寸以及间距
				workSize:{
					imgWidth:48,
					imgHeight:48,
					picWidth:64,
					picHeight:64,
					gap:40
				},
				//导航新闻数据数组
				navArr:[
						{
						img:'../../static/imgs/messageimgs/1.png',
						title:'待办',
						bgCloor:'#f31a71'
						},
						{
							img:'../../static/imgs/messageimgs/2.png',
							title:'待阅',
							bgCloor:'#209bfd'
						},
						{
							img:'../../static/imgs/messageimgs/3.png',
							title:'已办',
							bgCloor:'#ffbf6b'
						},
						{
							img:'../../static/imgs/messageimgs/4.png',
							title:'已阅',
							bgCloor:'#8867f5'
						},
						{
							img:'../../static/imgs/messageimgs/5.png',
							title:'系统',
							bgCloor:'#3ad1ae'
						},
				],
			
				workArr:[
					{
						title:'教职工请假申请',
						form:'工作部门:系统维护 请假申请人:xxx',
						time:'昨天',
						img:'../../static/imgs/messageimgs/6.png',
						bgColor:'#ffffff'
					},
					{
						title:'补课申请',
						form:'任课教师:系统管理员',
						time:'昨天',
						img:'../../static/imgs/messageimgs/7.png',
						bgColor:'#ffffff'
					},
					{
						title:'域名申请',
						form:'工作部门:系统维护 请假申请人:xxx',
						time:'昨天',
						img:'../../static/imgs/messageimgs/8.png',
						bgColor:'#ffffff'
					},
					{
						title:'出国旅游申请',
						form:'工作部门:系统维护 请假申请人:xxx',
						time:'昨天',
						img:'../../static/imgs/messageimgs/9.png',
						bgColor:'#ffffff'
					},
				]
			}
		},
		methods: {
			
		},
		onShow() {
			//获取导航栏的高度
			let h = uni.getSystemInfoSync().statusBarHeight 
			this.navHeight = h
		}
	}
</script>

<style scoped lang="scss">
.new{
	padding: 0 40rpx;
	box-sizing: border-box;
	
	.box{
		height: 210rpx;
	}
	
	.nav{
		display: flex;
		justify-content: space-evenly;
		margin-top: 50rpx;
		gap: 15rpx;
	}
	
	.work{
		margin-top: 100rpx;
	}
	
	
}

</style>
